<template>
    <view class="container">
        <form @submit="bindSave">
            <view class="search">
                <icon style="margin-top: 0;" type="search" size="14"></icon>
                <input type="text" placeholder="请输入相关信息" placeholder-class="search_plac" confirm-type="search" name="keyword" />
                <button formType="submit">搜索</button>
            </view>
        </form>

        <view class="news">
            <view class="joblist_2" v-for="(item, index) in companylist" :key="index">
                <view class="title_2" @tap="toCompanyDetial" :data-id="item.id">
                    <view class="jobinfo_2">
                        <view class="logo">
                            <image :src="item.thumb"></image>
                        </view>
                        <view class="jobinfoleft_2">
                            <view class="address_2">
                                <view class="jobname_2">{{ item.companyname }}</view>
                                <view class="moneyinfo_2"></view>
                            </view>
                            <view class="special_2">
                                <!-- <view class="items_2" wx:for="{{item.special}}" wx:for-item="itemSpecial">{{itemSpecial}}</view> -->
                                <view class="items_2">{{ item.companytype }}</view>
                                <view class="items_2">{{ item.companyworker }}</view>
                                <view class="items_2">{{ item.companycate }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="detail_2">
                        <view class="info_2">
                            <view class="companyinfo_3" style="font-size: 0.9rem">
                                <view>{{ item.jobcount }}个职位在招</view>
                                <block v-for="(itemJob, itemIndex) in item.joblist" :key="itemIndex">
                                    <view v-if="itemIndex < 2">{{ itemJob.jobtitle }}</view>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="loadmore" v-if="!loadmore">
            <text>未查找相关信息</text>
        </view>
    </view>
    <!-- news end -->
</template>

<script>
import { Company } from '../../model/company-model.js';
var company = new Company();
export default {
    data() {
        return {
            TabCur: 1,
            MainCur: 0,
            VerticalNavTop: 0,
            list: [],
            load: true,
            cateid: 0,
            priceid: 0,
            edu: '',
            express: '',
            sex: -1,
            special: '',
            loadmore: true,
            companylist: ''
        };
    },
    onLoad() {
        var that = this;
        uni.setNavigationBarTitle({
            title: '企业搜索'
        });
        uni.showLoading({
            title: '加载中...',
            mask: true
        });
    },
    onReady() {
        uni.hideLoading();
    },
    methods: {
        toCompanyDetial: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/companydetail/index?id=' + id
            });
        },

        bindSave: function (e) {
            var that = this;
            var keyword = e.detail.value.keyword;
            if (keyword == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入相关信息',
                    showCancel: false
                });
                return;
            }
            var params = {
                keyword: keyword
            };
            company.getSearchCompany((data) => {
                if (data.companylist.length > 0) {
                    that.setData({
                        companylist: data.companylist,
                        loadmore: true
                    });
                } else {
                    that.setData({
                        companylist: data.companylist,
                        loadmore: false
                    });
                }
            }, params);
        }
    }
};
</script>
<style>
.container {
    background-color: #fff;
    min-height: 100%;
}
.search {
    display: flex;
    width: 100%;
    /* line-height: 50px; */
    padding: 10px 4%;
    background-color: #f5f5f5;
}

.search input {
    width: 70%;
    height: 30px;
    background-color: #fff;
    padding-left: 10%;
}

.search_plac {
    font-size: 14px;
}

.search icon {
    position: absolute;
    left: 7%;
    top: 17px;
    z-index: 99;
}

.search button {
    flex: 1;
    width: 30px;
    line-height: 30px;
    border: 0;
    color: #fff;
    background-color: #e62129;
    padding-left: 0;
    padding-right: 0;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 2px;
}

.hot_search {
    width: 96%;
    padding: 0 2%;
}

.hot_search_tit {
    line-height: 30px;
}

.hot_search_tit text {
    padding: 0 2%;
    font-size: 14px;
}

.hot_tag {
    display: flex;
    flex-wrap: wrap;
}

.hot_tag text {
    width: 20%;
    line-height: 25px;
    border: 1px solid #acacac;
    border-radius: 2px;
    font-size: 12px;
    text-align: center;
    margin: 4px 2%;
}
.joblist_2 {
    display: flex;
    flex-direction: row;
    width: 720rpx;
    margin: 0 auto;
    /*
  border-bottom: 1px solid #efefef;
  */
    padding-top: 25rpx;
    padding-bottom: 25rpx;
    background: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
}

.joblist_2 .title_2 {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}
.joblist_2 .title_2 .address_2 {
    padding-left: 2%;
    font-size: 0.8rem;
    color: #646464;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 700rpx;
    padding-top: 20rpx;
}

.joblist_2 .title_2 .address_2 view:nth-child(1) {
    color: #000000;
    font-weight: bold;
    width: 52%;
}

.joblist_2 .title_2 .address_2 view:nth-child(2) {
    color: #ff9102;
    font-weight: bold;
    width: 47%;
    text-align: right;
    padding-right: 1%;
}

.joblist_2 .title_2 .detail_2 {
    padding-left: 2%;
    text-align: left;
    font-size: 0.8rem;
    color: #000;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 15rpx;
}

.joblist_2 .title_2 .detail_2 .pic_2 {
    width: 10%;
    display: flex;
    align-items: center;
}
.joblist_2 .title_2 .detail_2 .pic_2 image {
    width: 60rpx;
    height: 60rpx;
    align-self: center;
}
.joblist_2 .title_2 .detail_2 .info_2 {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.companyinfo_3 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 1.2rem;
    color: #888888;
    width: 700rpx;
}
.companyinfo_3 view {
    margin-right: 8rpx;
}

.joblist_2 .title_2 .price_2 {
    width: 28%;
}

.joblist_2 .title_2 .price_2 .money_2 {
    color: #d65408;
    font-weight: bold;
    font-size: 0.7rem;
    padding-right: 10rpx;
}
.jobname_2 {
    font-size: 1rem;
    color: #000000;
    display: flex;
    flex-direction: row;
}
.jobname_2 > text {
    color: #fff;
    background: #ff5d37;
    padding: 6rpx;
    border-radius: 5rpx;
}
.jobname_2 image {
    width: 40rpx;
    height: 40rpx;
}

.joblable_2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #888888;
    padding-left: 2%;
    margin-top: 10rpx;
}

.vprice_2 {
    font-size: 0.6rem;
    background: #34c6c3;
    font-weight: bold;
    color: #fff;
    height: 70rpx;
    line-height: 70rpx;
    width: 140rpx;

    margin-left: 80rpx;

    border-radius: 40rpx;
    text-align: center;
}

.special_2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 10rpx;
    padding-left: 2%;

    width: 700rpx;
}
.special_2 .items_2 {
    margin-right: 10rpx;
    border-radius: 5rpx;
    padding: 8rpx;
    font-size: 30rpx;
    margin-top: 10rpx;
    background: #f6f6f4;
    color: #888888;
}
.moneyinfo_2 {
    color: #34c6c3;
    font-size: 1rem;
    font-weight: bold;
}

.time_2 {
    text-align: right;
    padding-right: 25rpx;
}

.fxmoney_2 {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
}

.fxmoney_2 > view {
    font-size: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fxmoney_2 > view:nth-child(1) {
    width: 200rpx;
    height: 60rpx;
    background: #ff4c35;
    border-radius: 10rpx 10rpx 0 0;
    border: 1rpx solid #ff4c35;
    color: #fff;
}

.fxmoney_2 > view:nth-child(2) {
    width: 200rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 0rpx 0rpx 10rpx 10rpx;
    border: 1rpx solid #ff4c35;
    color: #ff4c35;
    text-align: center;
}

.jobinfo_2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.jobinfo_2 > view:nth-child(1) {
    width: 20%;
}
.logo {
    width: 150rpx;
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rpx;
}
.logo image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 5rpx;
}

.jobinfo_2 > view:nth-child(2) {
    width: 70%;
}
</style>
